// 低版本下,所有的组件使用jsx的代码, 最后都会被bebal 转换为React.createElement()
// 低版本都需要导入React
import React, { Component } from 'react'
// 函数组件, 函数名就是组件名 一般和文件名同名 必须首字母大写
// 17之前函数组件也叫做 无状态组件 魔偶组件  不可以使用state
export  function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

// 类组件  类名就是组件名 一般和文件名同名 必须首字母大写
// 类组件必须直接或间接 继承与 React.Component  jsx代码必须通过render函数返回
export class Box extends React.Component {
    nameInstance = 'nameInstance'
    constructor(props) {
        super(props);
        this.state = {
            name: 'chengchao',
            age: 20
        };
    }
    clickFn() {
        console.log(11111, this.state.age)
        this.setState({
            age: this.state.age + 1
        })
    }
    render() {
        return (
            <>
                <p>使用实例的值{this.nameInstance}</p>
                <p>使用state的值{this.state.name}</p>
                <button onClick={() => this.clickFn()}>哈哈哈这是类组件{this.state.age}</button>
            </>
        )
    }
}